<template>
  <div class="mall">
    <div class="container">
      <collapseCourses
        :coursesData="currCourses"
        :disabled="true"
        :isMall="true"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import collapseCourses from "@/views/home/collapseCourses";

export default {
  components: {
    collapseCourses,
  },
  data() {
    return {
      coursesData: [],
    };
  },
  computed: {
    ...mapState({
      currCourses: (state) => state.courses.currCourses,
    }),
  },
  created() {
    this.$store.dispatch("courses/fetchCoursesList");
  },
};
</script>

<style lang="stylus">
.mall {
  padding: 20px 0;

  .container {
    margin: 0 auto;
    max-width: 1200px;

    .collapseCourses .el-collapse {
      padding-top: 10px;
      border-radius: 5px;
      box-shadow: 0px 0px 1px 0px rgba(19,18,18,0.16)
    }

    .el-collapse-item .el-collapse-item__header {
      cursor: default;
    }

    .el-collapse-item__header .title  {
      cursor pointer
    }
  }
  @media only screen and (max-width: 1070px) {
    .homeSwiper {
      width: auto !important;
    }
  }

  @media only screen and (max-width: 975px) {
    .right-info {
      flex: 1;
    }
    .home-carouselBox {
      display: none !important;
    }
  }
  @media only screen and (max-width: 700px) {

    .el-collapse-item__header {
      display: flex;
      .title {
        margin: 0 !important;
        flex: 1;
        text-align: center;
      }
    }


  }

  @media only screen and (max-width: 603px) {
    .el-collapse-item__content .courses {
      justify-content: center !important;
    }
  }
}
</style>
